<template>
    <div class="hotlist">
  
  <div class="none"><span @click="$router.go(-1)" class="iconfont icon-changyongicon-1
"></span>

</div>
<div class="image">
  <div class="pic"><img src="../../../public/imagescx/01.webp" alt=""></div> <div>我关注|关注我</div>
</div>
<ul class="infor">
  <li class="first"><div><span class="name">李华</span> <span>未设置社区昵称</span></div> <div class="green">编辑资料</div></li>
  <li class="sec">金融学.14届</li>
  <li class="last">IP归属地:陕西</li>
</ul>
<section>
<div>
  <ul>
    <li>社区创作</li>
    <li>社区勋章</li>
    <li>我的get</li>
    <li>关注内容</li>
  </ul>
</div>
</section>
<div class="special">
<div><div>
  <h3>兴趣爱好></h3>
<h3>标记你的爱好</h3>
</div>
<div><button>去标记</button></div></div>
</div>
<h5>个人标签</h5>
<h6>添加更多标签，让更多人认识你...</h6>
<button class="btn">+添加标签</button>
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style lang="scss" scoped>
    .hotlist{
        background-color: rgba(128, 128, 128, 0.073);;
    }
  .none{
      width: 100%;
      height: 2rem;
      background: url(../../../public/imagescx/01.webp);
      padding-top: .2rem;
    
     span{
      color: white;
      font-size: .3rem;
     

     }
    }
    .pic{
        width: .8rem;
        height: .8rem;
        border-radius: 50%;
        
        img{
          width: .8rem;
        height: .8rem;
        border-radius: 50%;
        }
      }
      .image{
           
        padding: 0 .1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
  .infor{line-height: .3rem;
    padding: .2rem;
        .first{
          display: flex;
          justify-content: space-between;
          .green{
            width: .74rem;
            height: .3rem;
            border: .02rem solid #64bfbb;
            color: #64bfbb;
            font-weight: 600;
            border-radius: .15rem;
            text-align: center;
            line-height: .3rem;
          }
          div span{
            color: rgba(128, 128, 128, 0.945);
          }
          .name{
            font-weight: 700;
            font-size: .24rem;
            color: black;
          }

        }
        .sec{
          transform-origin: left top;
          transform: scale(.9);
          font-weight: 500;
          color: rgba(128, 128, 128, 0.934);
        }
        .last{transform: scale(.9);
          color: rgba(128, 128, 128, 0.858);
          transform-origin: left top;
        }
      }
      section{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1rem;
        width: 100%;
        // background-color: rgba(128, 128, 128, 0.087);
        div{
          width: 3.34rem;
          height: .85rem;
          background-color:white;
          ul{
            display: flex;
            li{
              // transform-origin: left top;
              transform: scale(.8);
              width: .77rem;
              height: .85rem;
              margin-right: .05rem;
              text-align: center;
              line-height: .85rem;
            }
          }
        }
      }
      .special{
        width: 100%;
        height: 1.7rem;
        // background-color: rgba(128, 128, 128, 0.073);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: .2rem;
        div{
          width: 1.08rem;
          height: 1.45rem;
          background-color: white;
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          // align-items: flex-start;
          position: relative;
          button{
            bottom: .1rem;
            position: absolute;
            margin-left: .2rem;
          color: white;
             border-radius: .15rem;
            width: .72rem;
            height: .3rem;
            background-color: #64bfbb;
            border:none
          }
          
        }
      }
      h5{margin-top: .1rem;
        font-size:.2rem;
        font-weight: 700;
        text-indent: 0.2rem;        
      }
      h6{
        margin-top: .1rem;
        transform: scale(.8);
        color: rgba(128, 128, 128, 0.817);
        transform-origin: left top;
        text-indent: 0.2rem;  
      }
      .btn{
        margin-top: .1rem;
        width: 1.2rem;
        height: .22rem;
        border: .01rem solid #64bfbb;
        color: #64bfbb;
        // margin-left: .2rem;
        transform: scale(.8);
      }
  </style>